<template>
  <div class="search-results-container">
    <div class="search-header">
      <div class="search-info">
        <h2>搜索"{{ keyword }}"的结果</h2>
        <div class="search-stats">共找到 {{ totalResults }} 个相关结果</div>
      </div>
    </div>

    <!-- 内容类型选项卡 -->
    <el-tabs v-model="activeType" @tab-click="handleTabChange">
      <el-tab-pane label="全部" name="all">
        <div class="search-all-container" v-loading="loading">
          <!-- 无搜索结果时显示 -->
          <div class="no-results" v-if="!loading && !hasAnyResults">
            <el-empty description="暂无搜索结果"></el-empty>
          </div>

          <!-- 有结果时动态显示对应内容 -->
          <template v-else>
            <!-- 歌曲预览 -->
            <div class="preview-section" v-if="hasSongResults">
              <div class="section-header">
                <h3>歌曲</h3>
                <router-link
                  :to="{ path: '/search', query: { keyword, type: 'songs' } }"
                  >查看更多</router-link
                >
              </div>
              <el-table :data="songResults.list.slice(0, 5)" stripe>
                <el-table-column label="" width="80">
                  <template #default="scope">
                    <div class="song-index">{{ scope.$index + 1 }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="封面" width="110">
                  <template #default="scope">
                    <img
                      :src="scope.row.coverUrl"
                      alt="封面"
                      style="
                        width: 100px;
                        height: 100px;
                        border-radius: 6px;
                        object-fit: cover;
                      "
                    />
                  </template>
                </el-table-column>
                <el-table-column label="歌曲">
                  <template #default="scope">
                    <div class="song-info">
                      <div
                        class="song-title"
                        style="cursor: pointer"
                        @click="goToSongDetail(scope.row.songId)"
                      >
                        {{ scope.row.songName }}
                      </div>
                      <div v-if="scope.row.albumName" class="song-album">
                        {{ scope.row.albumName }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="歌手" width="180">
                  <template #default="scope">
                    {{ scope.row.artistName }}
                  </template>
                </el-table-column>
                <el-table-column label="时长" width="100">
                  <template #default="scope">
                    {{ formatDuration(scope.row.duration) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template #default="scope">
                    <el-icon
                      @click="playSong(scope.row)"
                      style="cursor: pointer; font-size: 28px; color: #9176db"
                    >
                      <VideoPlay />
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 歌手预览 -->
            <div class="preview-section" v-if="hasArtistResults">
              <div class="section-header">
                <h3>歌手</h3>
                <router-link
                  :to="{ path: '/search', query: { keyword, type: 'artists' } }"
                  >查看更多</router-link
                >
              </div>
              <div class="artist-grid">
                <div
                  class="artist-card"
                  v-for="(artist, index) in artistResults.list.slice(0, 6)"
                  :key="index"
                  @click="goToArtistDetail(artist.artistId)"
                >
                  <div class="artist-avatar">
                    <img
                      :src="
                        artist.avatarUrl ||
                        artist.coverUrl ||
                        'https://picsum.photos/100/100?random=' + index
                      "
                      alt="歌手头像"
                    />
                  </div>
                  <div
                    class="artist-name"
                    style="
                      cursor: pointer;
                      color: #9176db;
                      text-decoration: underline;
                    "
                    @click.stop="goToArtistDetail(artist.artistId)"
                  >
                    {{ artist.artistName }}
                  </div>
                  <div class="artist-info">
                    {{ artist.type }} · {{ artist.country || "未知地区" }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 专辑预览（与专辑标签下保持一致） -->
            <div class="preview-section" v-if="hasAlbumResults">
              <div class="section-header">
                <h3>专辑</h3>
                <router-link
                  :to="{ path: '/search', query: { keyword, type: 'albums' } }"
                  >查看更多</router-link
                >
              </div>
              <div class="album-list">
                <div
                  class="album-card"
                  v-for="(album, index) in albumResults.list.slice(0, 6)"
                  :key="index"
                  @click="goToAlbumDetail(album.albumId)"
                >
                  <div class="album-cover">
                    <img
                      :src="
                        album.coverUrl ||
                        'https://picsum.photos/150/150?random=' + index
                      "
                      alt="专辑封面"
                    />
                  </div>
                  <div class="album-title">
                    {{ album.albumName || album.title }}
                  </div>
                  <div class="album-artist">{{ album.artistName }}</div>
                  <div class="album-info">
                    <span>{{
                      album.releaseDate ? album.releaseDate.split("T")[0] : ""
                    }}</span>
                    <span>{{ album.genre }}</span>
                    <span>{{ album.trackCount || album.songCount }}首</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </el-tab-pane>

      <!-- 歌曲选项卡 -->
      <el-tab-pane label="歌曲" name="songs">
        <div class="tab-content" v-loading="loading">
          <template v-if="hasSongResults">
            <div class="operation-bar">
              <el-button type="primary" size="small" @click="playAll"
                >播放全部</el-button
              >
              <el-button size="small" @click="addAllToPlaylist"
                >添加到播放列表</el-button
              >
            </div>
            <el-table :data="songResults.list" stripe>
              <el-table-column label="" width="80">
                <template #default="scope">
                  <div class="song-index">{{ scope.$index + 1 }}</div>
                </template>
              </el-table-column>
              <el-table-column label="封面" width="100" padding-right="100px">
                <template #default="scope">
                  <img
                    :src="scope.row.coverUrl || ''"
                    alt="封面"
                    style="
                      width: 100px;
                      height: 100px;
                      border-radius: 6px;
                      object-fit: cover;
                      padding-right: 100px;
                    "
                  />
                </template>
              </el-table-column>
              <el-table-column label="歌曲">
                <template #default="scope">
                  <div class="song-info">
                    <div
                      class="song-title"
                      style="cursor: pointer"
                      @click="goToSongDetail(scope.row.songId)"
                    >
                      {{ scope.row.songName }}
                    </div>
                    <div v-if="scope.row.albumName" class="song-album">
                      {{ scope.row.albumName }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="歌手" width="180">
                <template #default="scope">
                  {{ scope.row.artistName }}
                </template>
              </el-table-column>
              <el-table-column label="流派" width="120">
                <template #default="scope">
                  {{ scope.row.genre }}
                </template>
              </el-table-column>
              <el-table-column label="时长" width="100">
                <template #default="scope">
                  {{ formatDuration(scope.row.duration) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-icon
                    @click="playSong(scope.row)"
                    style="
                      cursor: pointer;
                      font-size: 28px;
                      color: #9176db;
                      margin-right: 8px;
                    "
                  >
                    <VideoPlay />
                  </el-icon>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <div
              class="pagination-container"
              v-if="songResults.total > pagination.pageSize"
            >
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="songResults.total"
              >
              </el-pagination>
            </div>
          </template>

          <div class="no-results" v-else>
            <el-empty description="暂无歌曲搜索结果"></el-empty>
          </div>
        </div>
      </el-tab-pane>

      <!-- 歌手选项卡 -->
      <el-tab-pane label="歌手" name="artists">
        <div class="tab-content" v-loading="loading">
          <template v-if="hasArtistResults">
            <div class="artist-list">
              <div
                class="artist-card"
                v-for="(artist, index) in artistResults.list"
                :key="index"
                @click="goToArtistDetail(artist.artistId)"
              >
                <div class="artist-avatar">
                  <img :src="artist.avatarUrl" alt="歌手头像" />
                </div>
                <div class="artist-name">{{ artist.artistName }}</div>
                <div class="artist-info">
                  {{ artist.type || "个人" }} ·
                  {{ artist.country || "未知地区" }}
                </div>
                <div class="artist-follow">
                  粉丝数: {{ artist.followCount || 0 }}
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div
              class="pagination-container"
              v-if="artistResults.total > pagination.pageSize"
            >
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[12, 24, 48, 96]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="artistResults.total"
              >
              </el-pagination>
            </div>
          </template>

          <div class="no-results" v-else>
            <el-empty description="暂无歌手搜索结果"></el-empty>
          </div>
        </div>
      </el-tab-pane>

      <!-- 专辑选项卡 -->
      <el-tab-pane label="专辑" name="albums">
        <div class="tab-content" v-loading="loading">
          <template v-if="hasAlbumResults">
            <div class="album-list">
              <div
                class="album-card"
                v-for="(album, index) in albumResults.list"
                :key="index"
                @click="goToAlbumDetail(album.albumId)"
              >
                <div class="album-cover">
                  <img :src="album.coverUrl" alt="专辑封面" />
                </div>
                <div class="album-title">
                  {{ album.albumName || album.title }}
                </div>
                <div class="album-artist">{{ album.artistName }}</div>
                <div class="album-info">
                  <span>{{
                    album.releaseDate ? album.releaseDate.split("T")[0] : ""
                  }}</span>
                  <span>{{ album.genre }}</span>
                  <span>{{ album.trackCount || album.songCount }}首</span>
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div
              class="pagination-container"
              v-if="albumResults.total > pagination.pageSize"
            >
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[12, 24, 48, 96]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="albumResults.total"
              >
              </el-pagination>
            </div>
          </template>

          <div class="no-results" v-else>
            <el-empty description="暂无专辑搜索结果"></el-empty>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { VideoPlay } from "@element-plus/icons-vue";

export default {
  name: "SearchResults",
  data() {
    return {
      keyword: "",
      activeType: "all",
      loading: false,
      pagination: {
        page: 1,
        pageSize: 10,
      },
      filters: {
        // 歌曲和专辑筛选
        genre: "",
        releaseDate: [],
        // 歌手筛选
        type: "",
        country: "",
      },
      songResults: {
        total: 0,
        list: [],
      },
      artistResults: {
        total: 0,
        list: [],
      },
      albumResults: {
        total: 0,
        list: [],
      },
    };
  },
  computed: {
    totalResults() {
      return (
        this.songResults.total +
        this.artistResults.total +
        this.albumResults.total
      );
    },
    releaseStartDate() {
      return this.filters.releaseDate && this.filters.releaseDate.length > 0
        ? this.filters.releaseDate[0]
        : null;
    },
    releaseEndDate() {
      return this.filters.releaseDate && this.filters.releaseDate.length > 1
        ? this.filters.releaseDate[1]
        : null;
    },
    // 判断是否有相关结果
    hasSongResults() {
      return this.songResults.list && this.songResults.list.length > 0;
    },
    hasArtistResults() {
      return this.artistResults.list && this.artistResults.list.length > 0;
    },
    hasAlbumResults() {
      return this.albumResults.list && this.albumResults.list.length > 0;
    },
    // 判断是否有任何结果
    hasAnyResults() {
      return (
        this.hasSongResults || this.hasArtistResults || this.hasAlbumResults
      );
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.query.keyword) {
          this.keyword = to.query.keyword;
          this.activeType = to.query.type || "all";
          this.resetPagination();
          this.resetFilters();
          this.fetchSearchResults();
        }
      },
    },
  },
  methods: {
    // 跳转到歌曲详情
    goToSongDetail(songId) {
      if (songId) {
        this.$router.push(`/song/${songId}`);
      }
    },
    // 获取搜索结果（统一接口）
    async fetchSearchResults() {
      this.loading = true;
      this.songResults = { total: 0, list: [] };
      this.artistResults = { total: 0, list: [] };
      this.albumResults = { total: 0, list: [] };

      try {
        // 统一接口：/songs/global-search
        const params = {
          keyword: this.keyword,
          limit: this.pagination.pageSize,
        };
        const response = await this.$api.musicApi.globalSearch(params);
        if (response && response.data) {
          // 歌曲
          this.songResults = {
            total: response.data.songCount || 0,
            list: response.data.songs || [],
          };
          // 歌手
          this.artistResults = {
            total: response.data.artistCount || 0,
            list: response.data.artists || [],
          };
          // 专辑
          this.albumResults = {
            total: response.data.albumCount || 0,
            list: response.data.albums || [],
          };
        }
      } catch (error) {
        console.error("搜索出错:", error);
        this.$message.error("搜索失败，请稍后重试");
      } finally {
        this.loading = false;
      }
    },

    // 过滤搜索结果，只保留与关键词相关的内容
    filterSearchResults() {
      const keyword = this.keyword.toLowerCase().trim();
      if (!keyword) return;

      // 过滤歌手结果
      if (this.artistResults.list && this.artistResults.list.length > 0) {
        this.artistResults.list = this.artistResults.list.filter((artist) => {
          // 检查歌手名称是否包含关键词
          const nameMatch =
            artist.name && artist.name.toLowerCase().includes(keyword);
          return nameMatch;
        });
        // 更新总数
        this.artistResults.total = this.artistResults.list.length;
      }

      // 过滤歌曲结果
      if (this.songResults.list && this.songResults.list.length > 0) {
        this.songResults.list = this.songResults.list.filter((song) => {
          // 检查歌曲名称或歌手名称是否包含关键词
          const titleMatch =
            song.title && song.title.toLowerCase().includes(keyword);
          const artistMatch =
            song.artistName && song.artistName.toLowerCase().includes(keyword);
          const albumMatch =
            song.albumName && song.albumName.toLowerCase().includes(keyword);
          return titleMatch || artistMatch || albumMatch;
        });
        // 更新总数
        this.songResults.total = this.songResults.list.length;
      }

      // 过滤专辑结果
      if (this.albumResults.list && this.albumResults.list.length > 0) {
        this.albumResults.list = this.albumResults.list.filter((album) => {
          // 检查专辑名称或歌手名称是否包含关键词
          const titleMatch =
            album.title && album.title.toLowerCase().includes(keyword);
          const artistMatch =
            album.artistName &&
            album.artistName.toLowerCase().includes(keyword);
          return titleMatch || artistMatch;
        });
        // 更新总数
        this.albumResults.total = this.albumResults.list.length;
      }
    },

    // 获取歌曲搜索结果
    async fetchSongs() {
      const params = {
        keyword: this.keyword,
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
      };

      // 添加筛选条件
      if (this.filters.genre) {
        params.genre = this.filters.genre;
      }

      if (this.releaseStartDate && this.releaseEndDate) {
        params.releaseDate = `${this.releaseStartDate},${this.releaseEndDate}`;
      }

      try {
        const response = await this.$api.songApi.searchSongs(params);
        let songData = response.data || { total: 0, list: [] };

        // 精确过滤，只保留与关键词相关的歌曲
        if (songData.list && songData.list.length > 0) {
          const keyword = this.keyword.toLowerCase().trim();
          songData.list = songData.list.filter((song) => {
            const titleMatch =
              song.title && song.title.toLowerCase().includes(keyword);
            const artistMatch =
              song.artistName &&
              song.artistName.toLowerCase().includes(keyword);
            const albumMatch =
              song.albumName && song.albumName.toLowerCase().includes(keyword);
            return titleMatch || artistMatch || albumMatch;
          });
          songData.total = songData.list.length;
        }

        this.songResults = songData;
      } catch (error) {
        console.error("获取歌曲搜索结果失败:", error);
        this.songResults = { total: 0, list: [] };
      }
    },

    // 获取歌手搜索结果
    async fetchArtists() {
      const params = {
        keyword: this.keyword,
        page: this.pagination.page,
        pageSize: this.activeType === "artists" ? this.pagination.pageSize : 6, // 全部模式下只取6条
      };

      // 添加筛选条件
      if (this.filters.type) {
        params.type = this.filters.type;
      }

      if (this.filters.country) {
        params.country = this.filters.country;
      }

      try {
        const response = await this.$api.artistApi.searchArtists(params);
        let artistData = response.data || { total: 0, list: [] };

        // 精确过滤，只保留与关键词相关的歌手
        if (artistData.list && artistData.list.length > 0) {
          const keyword = this.keyword.toLowerCase().trim();
          artistData.list = artistData.list.filter(
            (artist) =>
              artist.name && artist.name.toLowerCase().includes(keyword)
          );
          artistData.total = artistData.list.length;
        }

        this.artistResults = artistData;
      } catch (error) {
        console.error("获取歌手搜索结果失败:", error);
        this.artistResults = { total: 0, list: [] };
      }
    },

    // 获取专辑搜索结果
    async fetchAlbums() {
      const params = {
        keyword: this.keyword,
        page: this.pagination.page,
        pageSize: this.activeType === "albums" ? this.pagination.pageSize : 6, // 全部模式下只取6条
      };

      // 添加筛选条件
      if (this.filters.genre) {
        params.genre = this.filters.genre;
      }

      if (this.releaseStartDate && this.releaseEndDate) {
        params.releaseDate = `${this.releaseStartDate},${this.releaseEndDate}`;
      }

      try {
        const response = await this.$api.albumApi.searchAlbums(params);
        let albumData = response.data || { total: 0, list: [] };

        // 精确过滤，只保留与关键词相关的专辑
        if (albumData.list && albumData.list.length > 0) {
          const keyword = this.keyword.toLowerCase().trim();
          albumData.list = albumData.list.filter((album) => {
            const titleMatch =
              album.title && album.title.toLowerCase().includes(keyword);
            const artistMatch =
              album.artistName &&
              album.artistName.toLowerCase().includes(keyword);
            return titleMatch || artistMatch;
          });
          albumData.total = albumData.list.length;
        }

        this.albumResults = albumData;
      } catch (error) {
        console.error("获取专辑搜索结果失败:", error);
        this.albumResults = { total: 0, list: [] };
      }
    },

    // 切换类型标签
    handleTabChange(tab) {
      // 如果没有相关类型的结果，则显示空结果提示
      if (
        (tab.name === "songs" && !this.hasSongResults) ||
        (tab.name === "artists" && !this.hasArtistResults) ||
        (tab.name === "albums" && !this.hasAlbumResults)
      ) {
        // 已经没有结果，无需重新请求，只更新URL和标签页
        this.$router.replace({
          path: "/search",
          query: {
            keyword: this.keyword,
            type: tab.name,
          },
        });
        return;
      }

      this.$router.replace({
        path: "/search",
        query: {
          keyword: this.keyword,
          type: tab.name,
        },
      });
      this.resetPagination();
      this.fetchSearchResults();
    },

    // 筛选变化
    handleFilterChange() {
      this.resetPagination();
      this.fetchSearchResults();
    },

    // 重置筛选条件
    resetFilters() {
      this.filters = {
        genre: "",
        releaseDate: [],
        type: "",
        country: "",
      };
    },

    // 重置分页
    resetPagination() {
      this.pagination.page = 1;

      // 根据内容类型设置每页数量
      if (this.activeType === "songs") {
        this.pagination.pageSize = 10;
      } else {
        this.pagination.pageSize = 12; // 歌手和专辑使用网格布局，每页12个
      }
    },

    // 页码变化
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.fetchSearchResults();
    },

    // 每页数量变化
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.pagination.page = 1;
      this.fetchSearchResults();
    },

    // 播放歌曲
    playSong(song) {
      // TODO: 播放歌曲逻辑
      console.log("播放歌曲:", song);
      // 可以通过事件总线或Vuex触发播放
      this.$message.success(`正在播放: ${song.title}`);
    },

    // 添加到播放列表
    addToPlaylist(song) {
      // TODO: 添加到播放列表逻辑
      console.log("添加到播放列表:", song);
      this.$message.success(`已添加到播放列表: ${song.title}`);
    },

    // 播放全部
    playAll() {
      if (this.songResults.list && this.songResults.list.length > 0) {
        // TODO: 播放全部歌曲逻辑
        console.log("播放全部歌曲");
        this.$message.success("正在播放全部歌曲");
      } else {
        this.$message.warning("没有可播放的歌曲");
      }
    },

    // 添加全部到播放列表
    addAllToPlaylist() {
      if (this.songResults.list && this.songResults.list.length > 0) {
        // TODO: 添加全部歌曲到播放列表逻辑
        console.log("添加全部歌曲到播放列表");
        this.$message.success("已添加全部歌曲到播放列表");
      } else {
        this.$message.warning("没有可添加的歌曲");
      }
    },

    // 跳转到歌手详情，并带上 from 参数
    goToArtistDetail(artistId) {
      if (artistId) {
        this.$router.push({
          name: "SingerDetail",
          params: { id: artistId },
          query: { from: this.$route.fullPath },
        });
      }
    },

    // 跳转到专辑详情
    goToAlbumDetail(albumId) {
      if (albumId) {
        this.$router.push(`/album/${albumId}`);
      }
    },

    // 格式化时长
    formatDuration(seconds) {
      if (!seconds) return "00:00";

      const min = Math.floor(seconds / 60);
      const sec = seconds % 60;

      return `${min.toString().padStart(2, "0")}:${sec
        .toString()
        .padStart(2, "0")}`;
    },
  },
};
</script>

<style scoped>
.search-results-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-header {
  margin-bottom: 20px;
}

.search-info h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.search-stats {
  color: #6e5c5c;
  font-size: 14px;
  margin-bottom: 16px;
}

.filter-container {
  background: #0066ff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 18px;
  margin: 0;
}

.section-header a {
  color: #9176db;
  text-decoration: none;
}

.preview-section {
  margin-bottom: 30px;
}

.operation-bar {
  margin-bottom: 16px;
}

.song-info {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

.song-title {
  font-weight: 500;
}

.song-album {
  font-size: 12px;
  color: #130e0e;
}

.song-index {
  font-size: 16px;
  color: #999;
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.artist-grid,
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.artist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.album-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.artist-card,
.album-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
  padding: 16px;
  border-radius: 8px;
}

.artist-card:hover,
.album-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background: #f9f9f9;
}

.artist-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
}

.artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.artist-info,
.artist-follow {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.album-cover {
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.album-artist {
  font-size: 14px;
  color: #9176db;
  margin-bottom: 4px;
}

.album-info {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.no-results {
  padding: 30px;
  text-align: center;
}

/* 全局覆盖一些Element-UI的样式 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

:deep(.el-tabs__item.is-active) {
  color: #9176db;
}

:deep(.el-tabs__active-bar) {
  background-color: #9176db;
}
</style>
